<script setup lang="ts">
import Banner from './components/banner/index.vue';
import Information from './components/information/index.vue';
import EventCalendar from './components/EventCalendar.vue';
import Content from './components/content/index.vue';
import CommunityCard from './components/CommunityCard.vue';
import OperationCard from './components/OperationCard.vue';
import Footer from './components/Footer.vue';
import Sidebar from './components/Sidebar.vue';
import ScrollToTop from './components/ScrollToTop.vue';

const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<template>
  <section class="bg-hex-fafafa">
    <Sidebar />
    <ScrollToTop />
    <div class="pb-124">
      <Banner />
    </div>
    <div class="mt-48 container">
      <Information :is-column="props.options.Column == 1" />
    </div>
    <div class="mt-48">
      <EventCalendar />
    </div>
    <div class="flex translate-y--56 justify-between container">
      <div class="flex-grow">
        <Content />
      </div>
      <div class="ml-32 w-376 flex-shrink-0">
        <CommunityCard />
        <OperationCard v-if="props.options.OperationCard == 1" />
        <Footer />
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
</style>
